<section [formGroup]="sendSmsConfigForm" fxLayout="column">
  <mat-form-field class="mat-block" style="padding-bottom: 24px;">
    <mat-label translate>tb.rulenode.numbers-to-template</mat-label>
    <input required matInput formControlName="numbersToTemplate">
    <mat-error *ngIf="sendSmsConfigForm.get('numbersToTemplate').hasError('required')">
      {{ 'tb.rulenode.numbers-to-template-required' | translate }}
    </mat-error>
    <mat-hint [innerHTML]="'tb.rulenode.numbers-to-template-hint' | translate | safeHtml"></mat-hint>
  </mat-form-field>
  <mat-form-field class="mat-block" style="padding-bottom: 8px;">
    <mat-label translate>tb.rulenode.sms-message-template</mat-label>
    <textarea required matInput formControlName="smsMessageTemplate" rows="6"></textarea>
    <mat-error *ngIf="sendSmsConfigForm.get('smsMessageTemplate').hasError('required')">
      {{ 'tb.rulenode.sms-message-template-required' | translate }}
    </mat-error>
    <mat-hint [innerHTML]="'tb.rulenode.general-pattern-hint' | translate | safeHtml"></mat-hint>
  </mat-form-field>
  <mat-checkbox formControlName="useSystemSmsSettings" style="padding-bottom: 16px;">
    {{ 'tb.rulenode.use-system-sms-settings' | translate }}
  </mat-checkbox>
  <tb-sms-provider-configuration
    *ngIf="sendSmsConfigForm.get('useSystemSmsSettings').value === false"
    formControlName="smsProviderConfiguration"
    required>
  </tb-sms-provider-configuration>
</section>
